<template>
    <view class="content">
        <z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="true" :auto="false">
            <!-- <up-cell-group>
                <up-cell v-for="(item, index) in dataList" :key="item" :center="false" :arrow="false">
                    <template #title>
                        <view class="flex justify-between">
                            <text>姓名： {{ item.name }}</text>

                            <view v-if="item.status == 0" class="btn-group flex">
                                <up-text size="22rpx" type="primary" text="通过" @click="checkPassTo(item)"></up-text>
                                <text class="w-[20rpx]"></text>
                                <up-text size="22rpx" type="error" text="拒绝" @click="checkRefuseTo(item)"></up-text>
                            </view>


                            <view v-else-if="item.status == 1">
                                <up-tag :text="item.status_label" type="success"></up-tag>
                            </view>

                            <view v-else-if="item.status == 2">
                                <up-tag :text="item.status_label" type="error"></up-tag>
                            </view>


                            <view v-else-if="item.status == 3">
                                <up-tag :text="item.status_label" type="info"></up-tag>
                            </view>
                        </view>
                    </template>

<template #label>
                        <view class="label-info">
                            <view>
                                <text>
                                    性别： <text class="info-text">{{ item.gender == 1 ? '男' : '女' }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    手机号：<text class="info-text">{{ item.phone }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    来访单位：<text class="info-text">{{ item.visitor_company }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    来访人数：<text class="info-text">{{ item.visitor_count }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    受访单位：<text class="info-text">{{ item.visit_company }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    受访人名：<text class="info-text">{{ item.visit_person }}</text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    访问事由：<text class="info-text">
                                        {{ item.reason }}
                                    </text>
                                </text>
                            </view>
                            <view>
                                <text>
                                    入园时间：<text class="info-text">{{ item.visit_date }}</text>
                                </text>
                            </view>
                        </view>
                    </template>

</up-cell>
</up-cell-group> -->
            <view class="card-container">
                <view v-for="(item, index) in dataList" :key="item" class="card">
                    <view class="card-header">
                        <text class="title">姓名：{{ item.name }}</text>
                        <view class="status-group" v-if="item.status == 0">
                            <text class="btn primary" @click="checkPassTo(item)">通过</text>
                            <text class="spacer"></text>
                            <text class="btn error" @click="checkRefuseTo(item)">拒绝</text>
                        </view>
                        <view v-else-if="item.status == 1" class="tag success">{{ item.status_label }}</view>
                        <view v-else-if="item.status == 2" class="tag error">{{ item.status_label }}</view>
                        <view v-else-if="item.status == 3" class="tag info">{{ item.status_label }}</view>
                    </view>

                    <view class="card-body">
                        <view class="info-row">
                            <text>性别：</text>
                            <text class="info-text">{{ item.gender == 1 ? '男' : '女' }}</text>
                        </view>
                        <view class="info-row">
                            <text>手机号：</text>
                            <text class="info-text">{{ item.phone }}</text>
                        </view>
                        <view class="info-row">
                            <text>来访单位：</text>
                            <text class="info-text">{{ item.visitor_company }}</text>
                        </view>
                        <view class="info-row">
                            <text>来访人数：</text>
                            <text class="info-text">{{ item.visitor_count }}</text>
                        </view>
                        <view class="info-row">
                            <text>受访单位：</text>
                            <text class="info-text">{{ item.visit_company }}</text>
                        </view>
                        <view class="info-row">
                            <text>受访人名：</text>
                            <text class="info-text">{{ item.visit_person }}</text>
                        </view>
                        <view class="info-row">
                            <text>访问事由：</text>
                            <text class="info-text">{{ item.reason }}</text>
                        </view>
                        <view class="info-row">
                            <text>入园时间：</text>
                            <text class="info-text">{{ formatTime(item.visit_date) }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <template #empty>
                <z-paging-empty-view :empty-view-style="{ 'top': '-300rpx' }" :empty-view-fixed="true"
                    :empty-view-img="noData" empty-view-text="暂无信息"></z-paging-empty-view>
            </template>
        </z-paging>

        <up-toast ref="uToastRef"></up-toast>
    </view>
</template>

<script>
import {
    getApplyList, getCheckList,
    getCheckedList,
    checkPass,
    checkRefuse
} from '@/api/approvalCenter';
import noData from '../../../static/noData.png'
import dayjs from 'dayjs';

export default {
    name: 'SwiperListItem',
    props: {
        tabIndex: {
            type: Number,
            default: 0
        },
        currentIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            noData,
            dataList: [],
            fistLoaded: false,
            options1: [{ text: '删除', style: 'color: red' }]
        }
    },
    computed: {
    },
    watch: {
        currentIndex: {
            handler(newVal) {
                if (newVal == this.tabIndex) {
                    if (!this.fistLoaded) {
                        this.$nextTick(() => {
                            this.$refs.paging.reload();
                        })
                    }
                }
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        queryList(pageNo, pageSize) {
            const api = [getApplyList, getCheckList, getCheckedList][this.currentIndex]
            api({ page: pageNo, limit: pageSize }).then(res => {
                // [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
                this.$refs.paging.complete(res.data);
            })
        },
        async checkPassTo(item) {
            try {
                const { id } = item;
                const res = await checkPass(id);
                if (res.code === 2000) {
                    this.$refs.uToastRef.show({
                        type: 'success',
                        message: res.msg,
                    })
                    this.$refs.paging.reload();
                } else {
                    this.$refs.uToastRef.show({
                        type: 'error',
                        message: res.msg,
                    })
                }
            } catch (error) {
                console.log(error);
            }
        },
        async checkRefuseTo(item) {
            try {
                const { id } = item;
                const res = await checkRefuse(id);
                if (res.code === 2000) {
                    this.$refs.uToastRef.show({
                        type: 'default',
                        message: res.msg,
                    })
                    this.$refs.paging.reload();
                } else {
                    this.$refs.uToastRef.show({
                        type: 'error',
                        message: res.msg,
                    })
                }
            } catch (error) {
                console.log(error);
            }
        },
        formatTime(time) {
            return dayjs(time).format('YYYY 年 MM 月 DD 日');
        },
    }
}
</script>

<style lang="scss" scoped>
// .content {
//     height: 100%;
// }

// .label-info {
//     margin-top: 10rpx;
//     padding-top: 10rpx;
//     font-size: 18rpx;
//     border-top: 1px solid #eee;

//     >view {
//         margin-top: 5rpx;
//         margin-bottom: 5rpx;
//     }
// }

// .info-text {
//     color: #4a4a4a;
// }
.content {
    height: 100%;
}

.card-container {
    //   padding: 20rpx;
    background: #ebebeb;
    box-shadow: none;
}

.card {
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    margin-bottom: 20rpx;
    padding: 20rpx;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
}

.title {
    font-size: 34rpx;
    // font-weight: bold;
}

.status-group {
    display: flex;
    align-items: center;
}

.btn {
    font-size: 28rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    cursor: pointer;
}

.btn.primary {
    color: #fff;
    background-color: #007aff;
}

.btn.error {
    color: #fff;
    background-color: #ff4d4f;
}

.spacer {
    width: 20rpx;
}

.tag {
    font-size: 28rpx;
    padding: 6rpx 12rpx;
    border-radius: 6rpx;
    text-align: center;
}

.tag.success {
    color: #fff;
    background-color: #52c41a;
}

.tag.error {
    color: #fff;
    background-color: #f5222d;
}

.tag.info {
    color: #fff;
    background-color: #4d4e4f;
}

.card-body {
    margin-top: 10rpx;
}

.info-row {
    font-size: 26rpx;
    display: flex;
    align-items: center;
    //   justify-content: space-between;
    margin-bottom: 10rpx;
}

.info-text {
    color: #555;
    font-size: 28rpx;
}
</style>